<template>
  <div>

    <div class="handle">

      <!-- 查询区域 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="编号">
          <el-input v-model="formInline.empNo" placeholder="编号"></el-input>
        </el-form-item>
        <!-- empNo empName  phone deptNo-->
        <el-form-item label="姓名">
          <el-input v-model="formInline.empName" placeholder="姓名"></el-input>
        </el-form-item>

        <el-form-item label="电话">
          <el-input v-model="formInline.phone" placeholder="电话"></el-input>
        </el-form-item>

        <el-form-item label="部门">
          <el-select v-model="formInline.deptNo" placeholder="选择部门">
            <el-option v-for="item in deptArr" :key="item.value" :label="item.deptName"
              :value="item.deptNo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>



      <el-button @click="showAddUser" type="primary">添加新用户</el-button>

      <el-dialog :title="this.isedit ? '编辑员工信息' : '添加新员工'" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.empName" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">

            <el-select v-model="form.gender" placeholder="请选择活动区域">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>

            <!-- <el-input v-model="form.gender" autocomplete="off"></el-input> -->

          </el-form-item>
          <el-form-item label="生日" :label-width="formLabelWidth">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.birthday" style="width: 30%;"></el-date-picker>
            <!-- <el-input v-model="form.birthday" autocomplete="off"></el-input> -->
          </el-form-item>
          <el-form-item label="部门" :label-width="formLabelWidth">
            <el-select v-model="form.deptNo" placeholder="选择部门">
              <el-option v-for="item in deptArr" :key="item.value" :label="item.deptName"
                :value="item.deptNo"></el-option>
            </el-select>

           

            <!-- <el-input v-model="form.deptNo" autocomplete="off"></el-input> -->
          </el-form-item>

          <el-form-item label="是否是经理职位" :label-width="formLabelWidth">
          <el-select v-model="form.isManager" placeholder="请选择">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
          </el-form-item>

          <el-form-item label="地址" :label-width="formLabelWidth">
            <el-input v-model="form.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="职位" :label-width="formLabelWidth">
            <el-input v-model="form.job" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="入职时间" :label-width="formLabelWidth">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.hire_date"
              style="width: 30%;"></el-date-picker>
            <!-- <el-input v-model="form.hire_date" autocomplete="off"></el-input> -->
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="subUsers">确 定</el-button>
        </div>
      </el-dialog>

    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="empNo" label="编号" width="180">
      </el-table-column>
      <el-table-column prop="empName" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="phone" label="电话">
      </el-table-column>
      <el-table-column prop="deptName" label="部门">
      </el-table-column>
      <el-table-column prop="gender" label="性别">
      </el-table-column>
      <el-table-column prop="hireDate" label="生日">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <!-- <el-button type="primary" @click="opendetail"> -->
        <template slot-scope="scope">
          <el-popover placement="left" width="300" trigger="click">
            <el-form label-width="80px">
              <el-form-item label="名称">
                {{ scope.row.empName }}
              </el-form-item>
              <el-form-item label="年龄">
                {{ scope.row.empName }}
              </el-form-item>
              <el-form-item label="性别">
                {{ scope.row.gender }}
              </el-form-item>
              <el-form-item label="生日">
                {{ scope.row.hireDate }}
              </el-form-item>
              <el-form-item label="地址">
                {{ scope.row.address }}
              </el-form-item>
              <el-form-item label="岗位">
                {{ scope.row.job }}
              </el-form-item>
              <el-form-item label="部门">
                {{ scope.row.deptName }}
              </el-form-item>
            </el-form>

            <el-button type="primary" slot="reference">详细</el-button>
          </el-popover>
          &nbsp;&nbsp;
          <el-popover placement="top" width="120" v-model="scope.row.visible">
            <p>确定删除这条员工信息？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="cancelDelete(scope.$index)">取消</el-button>
              <el-button type="primary" size="mini" @click="sureDelete(scope.$index, scope.row.empNo)">确定</el-button>
            </div>
            <el-button type="danger" icon="el-icon-delete" slot="reference" circle></el-button>
          </el-popover>
          <el-button @click="editUser(scope.row.empNo)" type="success" icon="el-icon-edit" slot="reference"
            circle></el-button>
        </template>
        <!-- </el-button> -->

      </el-table-column>
    </el-table>

    <!-- 用户详细激活 -->
    <br />
    <el-pagination background layout="prev, pager, next" @current-change="changePage" :total="this.totalUser">
    </el-pagination>

  </div>

</template>

<script>
import { getUserList, addUser, delUser, getSearchUserList } from '@/api/staffs'
import { getDepartment } from '@/api/department'
import request from '@/utils/myrequest'

export default {
  name: 'Users',
  data() {
    return {
      isedit: false,
      tableData: [{
        empNo: '1001',
        empName: '王小虎',
        phone: 136278876789,
        gender: "男",
        hireDate: "1995-3-5",
        address: '上海市普陀区金沙江路 1518 弄',
        visible: false,
        deptName: "默认部门数据"
      }],
      totalUser: 0,
      formInline: {
        empName: "",
        empNo: "",
        phone: "",
        deptNo: ""
      },
      dialogFormVisible: false,
      form: {
        empName: '',
        phone: '',
        gender: "男",
        birthday: '',
        address: "",
        job: "",
        hire_date: "",
        deptNo: "选择部门",
        isManager:"0"
      },
      formLabelWidth: '120px',
      deptArr: [{
        deptNo: 1,
        deptName: '黄金糕'
      }, {
        deptNo: 2,
        deptName: '双皮奶'
      }]
    }
  },

  mounted() {
    this.getreplodList();
    this.getDepartmentFn();
  },
  methods: {
    async getreplodList() {
      let { data } = await getUserList();
      // this.totalUser = 
      console.log(data);
      let { rows, total } = data;
      let rowdata = rows.map(item => ({ ...item, visible: false }))
      this.tableData = rowdata;
      this.totalUser = total;
    },
    async getDepartmentFn() {
      let { data: { rows } } = await getDepartment();
      console.log("部分信息", rows);
      this.deptArr = rows;

    },
    async onSubmit() {
      let data = await getSearchUserList(this.formInline);
      let { rows, total } = data.data;
      console.log("搜索数据:", rows)
      let rowdata = rows.map(item => ({ ...item, visible: false }))
      this.tableData = rowdata;
      this.totalUser = total;
    },
    opendetail() {

    },
    cancelDelete(index) {
      // 点击取消删除按钮
      this.tableData[index].visible = false
    },
    // 确认删除
    async sureDelete(index, empNo) {
      let { data: { code } } = await delUser(empNo);
      console.log(code);
      if (code === 200) {
        this.tableData[index].visible = false
        this.$message('删除成功');
        await this.getreplodList();
      } else {
        this.$message('删除失败');
      }
    },
    showAddUser() {
      this.isedit = false;
      this.dialogFormVisible = true;

    },
    async changePage(p) {
      let { data } = await getUserList(p);
      // this.totalUser = 
      let { rows, total } = data;
      let rowdata = rows.map(item => ({ ...item, visible: false }))
      this.tableData = rowdata;
      this.totalUser = total;
    },
    // 添加员工 待测试
    async subUsers() {
      this.dialogFormVisible = false;

      if (this.isedit) {
        // 编辑
        let res = await request({
          url: '/admin/employee',
          data:this.form,
          method:"put"
        })
        console.log("编辑结果：", res);
       if(res.data.code===200){
        await this.getreplodList();
       }

      } else {
        let { data: { code } } = await addUser(this.form);
        if (code === 200) {
          this.$message("添加成功");
          await this.getreplodList();
        } else {
          this.$message("添加失败");
        }
      }

    },
    async editUser(empNo) {
      this.dialogFormVisible = true;
      this.isedit = true;

      let res = await request({
        url: '/admin/employee/' + empNo
      })
      console.log("查询结果是？？？？？", res);
      let resData = res.data.data;
      this.form = resData;
    }

  }

}
</script>

<style scoped>
.handle {
  display: flex;
  justify-content: space-between;
  padding-right: 50px;
  margin-top: 20px;
}

.el-input {
  width: 120px;
}

.el-input__inner {
  width: 50px;
}
</style>